<template>
	<view class="container ptb_8 plr_16">
		<view class="fc">
			<image class="ib width_88 height_24" src="../static/images/brand.png" mode=""></image>
		</view>
		<view class="mt_4 fc">
			<Divider color="#333333" :point="false" :lineCustomStyle="{height:'2rpx',backgroundColor:'#999'}"
				text="精选大牌好货" />
		</view>
		<view class="mt_8">
			<view class="list_item box_shadow height_166 fx bc_fff" v-for="item,index in dataList" :key="index">
				<image class="width_242 height_166" :src="item.brandImageUrl" mode="aspectFit"></image>
				<view class="fx_1 fx fx_col aic jcb pt_8 pb_12 plr_8 flow_h">
					<view class="fx fx_col aic w100 flow_h">
						<image class="width_80 height_44" :src="item.brandLogoUrl" mode="aspectFit"></image>
						<view class="mt_2 fz_16 fe_2 w100 fc">
							{{item.brandName||''}}
						</view>
						<view class="mt_4 fc_999 fz_12 fe w100 fc">
							{{item.brandIntroduction||''}}
						</view>
					</view>
					<button class="custom_btn default fz_12 lh_29 width_80 br_19"
						@click="handleDetail(item)">进入品牌</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/service/config/api'
	import Divider from '@/components/Divider.vue'
	export default {
		components: {
			Divider
		},
		data() {
			return {
				dataList: [],
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				api.get('/goods/api/product/getBrandPavilionList', {
					functionRange: this.$store.state.functionRange,
					appletType: this.$store.state.appType === this.$base.ADMIN_TYPE ? 0 : 1,
				}).then(res => {
					this.dataList = res.data;
				})
			},
			handleDetail(item) {
				if (item.id)
					uni.navigateTo({
						url: `/pages/goods/pages/search?brandId=${item.id}&brandName=${item.brandName}`
					})
			}
		}
	}
</script>

<style lang="scss">
	@include color_page;
</style>

<style lang="scss" scoped>
	.list_item+.list_item {
		margin-top: 32rpx;
	}
</style>